<template>
  <div>
    <el-card shadow="always" class="box-card">
      <div class="tableTitle"><span>基本信息</span></div>
      <div class="devTitle"><span>3月巡检计划</span></div>
      <div>
        <div class="tableStyle">
          <div class="labelS">计划编号</div>
          <div class="contentS">{{detailInfo.planNum}}</div>
          <div class="labelS">计划名称</div>
          <div class="contentS">{{detailInfo.planName}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">所属部门</div>
          <div class="contentS">{{detailInfo.deptName}}</div>
          <div class="labelS">负责人</div>
          <div class="contentS">{{detailInfo.liableUser}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">创建人</div>
          <div class="contentS">{{detailInfo.createBy}}</div>
           <div class="labelS">创建时间</div>
          <div class="contentS">{{detailInfo.createTime}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">计划开始时间</div>
          <div class="contentS">{{detailInfo.beginTime}}</div>
           <div class="labelS">计划结束时间</div>
            <div class="contentS">{{detailInfo.endTime}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">巡检类型</div>
          <div class="contentS">{{detailInfo.inspectSettings}}</div>
           <div class="labelS">巡检周期</div>
            <div class="contentS">{{detailInfo.inspectCycle}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">任务有效期</div>
          <div class="contentS">{{detailInfo.taskEffectiveTime}}</div>
           <div class="labelS">提前提醒时间</div>
            <div class="contentS">{{detailInfo.noticeTime}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">提前生成时间</div>
          <div class="contentS">{{detailInfo.generateTime}}</div>
           <div class="labelS">审核人</div>
            <div class="contentS">{{detailInfo.reviewer}}</div>
        </div>
        <div class="tableStyle">
          <div class="labelS">是否启用</div>
          <div class="contentS">
            {{detailInfo.enable=='0'?'不启用':'启用'}}
          </div>
          <div class="labelS">下次生成任务</div>
          <div class="contentS">
           
          </div>
        </div>
        <div class="tableStyle">
          <div class="labelS">巡检设置</div>
          <div class="contentS">
             <el-radio v-model="radio" label="0">无需扫码</el-radio>
             <el-radio v-model="radio" label="1">扫一个二维码即可提交</el-radio>
              <el-radio v-model="radio" label="3">只需填写异常项</el-radio>
          </div>
        </div>
        <div class="tableStyle">
          <div class="labelS">说明</div>
          <div class="contentS">
            {{detailInfo.remark}}
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="always" class="box-card">
      <div class="tableTitle"><span>执行信息</span></div>
       <el-card shadow="always" class="box-card" style="box-shadow:0px 0px 7px 0px #eff2f5">
           <el-row>
               <el-col :span="6">
                    <div>已过周期</div>
                    <div class="number">3229</div>
               </el-col>
                <el-col :span="6">
                    <div>实际执行周期</div>
                    <div class="number" style="color:#54B03A">32</div>
               </el-col>
                <el-col :span="6">
                    <div>故障次数</div>
                    <div class="number" style="color:#52B7F5">320</div>
               </el-col>
                <el-col :span="6">
                    <div>设备完好率</div>
                    <div class="number"  style="color:#FF5722">34</div>
               </el-col>
           </el-row>
       </el-card>
    </el-card>
    <el-card shadow="always" class="box-card">
      <div class="tableTitle"><span>负责人</span></div>
      <el-table :data="tableData2" border style="width: 100%">
           <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="名称"  width="150"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100"> </el-table-column>
        <el-table-column prop="ceterfied" label="资质证书"> </el-table-column>
        
      </el-table>
    </el-card>
    <el-card shadow="always" class="box-card">
      <div class="tableTitle"><span>巡检路线</span></div>
      <el-table :data="tableData3" border style="width: 100%">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="number" label="设备编号"  > </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="depart" label="所属部门"> </el-table-column>
        <el-table-column prop="type" label="类别"> </el-table-column>
        <el-table-column prop="guige" label="规格型号"  > </el-table-column>
        <el-table-column prop="position" label="位置"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import {
  getObj
} from "@/api/ems/inspection/plan";
export default {
  data() {
    return {
        radio:'1',
        planId:"",
        detailInfo:{},
      tableData3: [
        {
          number: "GW923700-12312",
          name: "注塑机201",
          depart: "设备部",
          type: "生产设备",
          guige:'KI90*281-091',
          position:'MR生产车间1层20.1'
        },
      ],
      tableData2: [
        {  
          ceterfied: "电工证中级，高级技师证书，维修电工职业资格证",
          name: "张韶涵",
          sex: "女",
        },
      ],
    };
  },
  mounted(){
    this.planId = this.$route.query.id;
    this.achieveList();
  },
  methods:{
    achieveList(){
      getObj( this.planId).then((res) => {
        this.detailInfo = res.data.data;
        this.radio = this.detailInfo.inspectSettings;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tableTitle {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.devTitle {
  color: #262626;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.box-card {
  margin-bottom: 10px;
  .el-card__body {
    padding-top: 10px;
  }
  .labelS {
    //display: inline-block;
    flex:0 0 150px;
    //height: 40px;
    // margin-right: 10px;
    text-align: left;
    color: #606266;
    padding: 10px;
    border: 1px solid rgba(236, 240, 244, 100);
    margin-bottom: -1px;
  }
  ::v-deep.contentS {
    border: 1px solid rgba(236, 240, 244, 100);
    // height: 40px;
    color: #606266;
    width: 100%;
    margin-left: -1px;
    margin-bottom: -1px;
    padding: 10px;
    // margin: 10px 0;
    // width: calc(100% - 120px);
    // display: inline-block;
    .el-radio__label{
      font-size: 12px;
    }
  }
  .tableStyle {
    display: flex;
  }
  .number{
      font-weight: bold;
      margin-top: 5px;
      font-size: 16px;
  }
}
</style>
